<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>组件使用中的细节点</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
<!--			<table>
				<tbody>
					<tr is='row'></tr>
				</tbody>
			</table>
			
			-->
<!--			<table>
				<tbody>
					<tr is='row'></tr>
					<tr is='row'></tr>
					<tr is='row'></tr>
				</tbody>
			</table>-->
			<!--<div ref='hello' @click='handleClick'>hello world</div>-->
			
			<counter ref='one' @change='handleChange'></counter>
			<counter  ref='two' @change='handleChange'></counter>
			<div>{{total}}</div>
		</div>
		
		<script>
/* 			Vue.component('row',{
				template:'<tr><td>this is a row</td></tr>'
			}) */
/* 			Vue.component('row',{
				data : function(){
					return {
						content:'this is a row'
					}
				},
				template:'<tr><td>{{content}}</td></tr>'
				
			}) */
		/* 	var app=new Vue({
				el:'#app',
				methods:{
					handleClick: function(){
						console.log(this.$refs.hello.innerHTML)
					}
				}
			}) */
			
			Vue.component('counter',{
				template:'<div @click="handleClick">{{number}} </div>',
				data:function () {
					return {
						number:0
					}
				},
				
				methods:{
					handleClick:function(){
						this.number ++
						this.$emit('change')
					}
				}
				
			})
						
			var app=new Vue({
					el:'#app',
					data:{
						total:0
					},
					methods:{
						handleChange:function(){
							console.info(this.$refs.one.number);
							console.info(this.$refs.two.number);
							this.total=this.$refs.one.number+this.$refs.two.number
						}
					}
				})
			
		</script>
	</body>
</html>